<!--
 * @Author: your name
 * @Date: 2021-06-30 14:11:30
 * @LastEditTime: 2021-09-13 10:27:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \单词\App.vue
-->
A.
    axios.defaults.baseURL = '配置基础路径'
B.
C.
    cls 
        终端中清屏
    cmd
        打开终端
D.
    diff算法  是different(不同的)简写
        DOM复用，只更新变更的，与虚拟DOM公用，提高性能
E.
F.
G.
    Git  版本管理系统，记录代码变更，可多人协作开发    'master主分支 login登录分支 register注册分支 ' 参考
    GitHub Desktop 是一个提交代码的工具
    git add . ④ 暂时存放区，点代表所有文件 
    git branch  查看分支      后面加分支名，创建分支 
    git branch -a 是查看全部分支 因为克隆到本地的不全部查看就只能看见进入的分支
    git branch   -d 分支名称  删除分支  -D强制铲除
    git branch   -r  查看远程所有分支
    git checkout 分支名称  可以切换分支
    git checkout 远程仓库有本地没有的分支名称     从远程创建并切换分支
    git checkout  -b 分支名称   ③ 创建并切换分支
    git clone  地址(网址)    克隆远程仓库的内容
    git commit -m "提示信息"  ⑤ 存放到本地仓库，存放前要先存放到暂存区
    git config  --global  全局配置   后面加user.name "要配置的用户名"   后面加user.email "要配置的联系方式"
    git config  --list   查看配置
    git fetch 是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。
    git init  ① 初始化一个本地仓库用于项目托管
    git log  ⑨ 查看版本日志   git log --oneline只显示一行简单日志 | git log -数字  显示几个文字
    git merge 分支名称  ⑥ 合并分支，必须在主分支上合并  发生冲突解决后要保存
    git pull [origin master]   ⑧ 拉取想要拉取的远程分支，拉取后会自定与本地分支合并
    git push -u origin(远程仓库别名) master(主分支)  ⑦ 首次以送，远程推送    首次推送后 git push 即可
    git reflog   查看所有历史版本日志
    git remote add origin(远程仓库别名) 地址(网址)    添加远程仓库到本地
    git remote remove origin(远程仓库别名)     移除远程仓库地址
    git remote show origin 查看远程仓库的分支
    git remote -v 查看远程仓库即别名
    git reset --hard 版本号  ⑩ 回退，切换选择版本
    git status ② 查看文件状态(红色：在开发区，绿色：在暂存区，nothing to commit：开发区没有任何变更)   后面加 -s 查看简单版信息
    git version  查看电脑版本号
H.
I.
    import 'vue文件路径'
        引入css样式的
    import  组件对象  from  'vue文件路径'
        引入组件的  
J.
    json-server name.json
        启动本地的后台接口服务器

K.
L.
M.
    methods: 方法（函数）
    MVVM: vue的设计模式
        1. M： Model（数据）-> data数据变量
        2. V： View（视图） -> template模版
        3. VM：ViewModel（视图模型）-> vue实例

N.
    npm i 
        在从gitee克隆的需要安装依赖
    npm i axios  -S
        在生产环境下载的处理ajax方法的axios库
        axios是用来发送请求接收结果的
    npm i await-to-js
        用来代替tar catch 的向后台发数据接收返回结果的插件
    npm i @vue/cli  -g
        在全局下载 vue 渐进式javascript框架
    npm i bootstrap@3.3.7   -S
        在生产环境下载的用less写的组件库
    npm i cnpm -g
        全局安装将有从国外下载的组件用淘宝镜像转国内
    npm i cos-js-sdk-v5 --save
        使用用腾讯云对象存储功能，将图片上传到腾讯云
        下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)
            1. 在云服务器上的准备：申请 cos 服务器，配置密钥，设置cors访问
            2. 在代码层面的准备：
                - 对象存储-接口文档
                - 下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)
                - 用自己的密钥去实例化cos
                - 具体做上传
    npm i dayjs
        在生产环境下载来转换相对时间，处理相对时间计算
            dayjs核心模块  import dayjs from 'dayjs'
            dayjs计算相对时间的模块  import relativeTime from 'dayjs/plugin/relativeTime'
            导入语言包  import 'dayjs/locale/zh-cn'
            把relativeTime模块的api扩展到dayjs上  dayjs.extend(relativeTime)
            使用语言包  dayjs.locale('zh-cn')
    npm i element-ui
        是一个基于vue的UI组件库
    npm i eslint -D
        在开发环境下载一种代码检查工具
    npm i json-server -g
        在全区下载json-server服务 JSON-Server 是一个 Node 模块,
        运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源
            json-server name.json 启动后台接口服务器
    npm i highlight.js@10.7.2
        给结构加样式
        是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目
    npm i less less-loader@5.0.0  -D
        在开发环境下载less用于编写css
    npm i moment  -S
        在生产环境下载管理时间格式的
    npm i postcss-px-to-viewport  
        在开发环境下载移动端 vw 适配，实现移动端适配
            在根目录配置postcss.config.js
                在文件中配置，该插件对行内样式无效
                module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, }}}
    npm i serve -g
        在全局下载用来启动打包文件 终端输入 serve 开启
    npm i socket.io-client
        创建和后台链接，实现即时通讯
    npm i vite-app 项目名称    
        创建完还需要进入项目
            npm i 安装依赖  
            最好安装npm i less less-loader@5.0.0  -D
            启动项目 npm run dev
        或者用另一种 yarn create vite-app 项目名称  安装依赖  yarn  启动 yarn dev
    npm i vant -S
        在生产环境下载vant组件库，快速搭建移动界面
         网址 http://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
    npm i vue-quill-editor
        在开发环境下载富文本编辑器
    npm i vue-router@3.0.7  -S
        在开发环境下载第三方包,专门用来实现路由切换的，下载后集成在vue项目中
    npm i vuex 
        让没有父子关系的不同组件使用相同的数据 实现状态管理
        1.配置组件 创建一个store.js
            引入 import Vuex from 'vuex'  import Vue from 'vue'
            使用安装  Vue.use(Vuex)
            初始化  const store = new Vuex.Store({  
                actions:{ 函数名(ctx,payload(参数)){ 异步获取数据 } },
                    定义actions函数异步获取数据
                getter:{}
                    vuex中的计算属性
                mutations:{ 函数名(state,payload(参数)){ state.数据名 += payload } },
                    修改带参数据的函数
                modules：
                    模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,
                    使得结构非常清晰，方便管理
                state:{ 数据名:数据 },
                    配置在多个组件中重复使用的数据
                (配置选项有 state | mutations | actions |getters) })
            导出  export default store 
        2.使用组件
            import {mapState,mapMutations,mapActions } from 'vuex'
                分别是 state | mutations | actions 的简写形式
            methods:下定义函数调用组件
                ...mapState|mapMutations|...(['函数名'])
            computed:下修改数据
                count () { return this.$store.state|mutations... .count }
        $store 调用
    npm i x
        封装excel导入组件安装必要的插件
            npm install xlsx file-saver -S
            npm install script-loader -S -D
    npm i yarn -g
        全局安装命令 同npm 一样
    npm init -y
        初始化
    npm install  webpack  webpack-cli  -D
        在开发环境下载压缩打包文件的第三方模块
        在package.json中 改 "scripds" : {"bulid":"webpack"}
    npm run build
        打包文件
            用来分包，路由懒加载，使一个包不那么大
            不在开始时都加载
            const login = () => import('@/路径')
    npm run server 
        开启vue脚手架，后面的server可替换
    npm run start
        在要启动的文件中cmd中启动本地后台的命令
O.
P.
Q.
R.
S.
    src vue文件下
        components文件夹
            复用组件 - 展示数据/常用与复用
        views文件夹 
            页面组件 - 页面展示 - 配合路由用
    script  里的 export default 里面
        下是js当前组件的行为
        async created () {
            是钩子函数，在页面初始化后就执行的函数
            const 变量名 = await this.$http({
            method:'请求方式',   GET/POST
            url:'路径' })
            this.list = 变量名.data.属性名  }
            向后台发送请求，获取数据
        copmonents:{"组件名",组件对象}
            组件调用方式
        computed:{ 书写计算属性函数 }
            一个变量的值。依赖另外一些数据计算而来的结果 用法与data中变量用法一直，变量名不能重复
            优势 带缓存
        data(){  return{  声明变量，返回的是数据对象 }  }
            在 return 之前
                生成数组的方法，将满足条件的放入同一数组中
                    filter(()=>{}) 
                    map (()=>{})
                    find(()=>{})
                    includes()
        directives:{ '指令名字':{ inserted(el){ 对el进行操作 }}}
            局部自定义指令传值 调用时在标签中 v-自定义指令名字 即可调用该方法
        filters:{  在局部定义过滤器 }   使用是  vue变量 | 过滤器名字
            在main.js中全局声明
                vue.filter("过滤器",(值)=>{return "返回处理后的值"})
            在某vue文件中局部声明
                filter:{过滤器名:(值)=>{return "返回处理后的值"}}
        methods:{ 定义函数 }
            every()  vue检测数据中所有元素是否满足某个条件
            forEach((item,index,array)=>{})   vue遍历数组
            filter("过滤器名",(值)=>{return "返回处理后的值"})   
                vue筛选数组,留下满足条件的
                使用时   Vue变量 | 过滤器名   
            find()   vue查找，根据条件查找元素
            findIndex()   vue查找，根据条件查找元素的下标
            inchudes()  vue检测数组中是否包含某个元素
            join()  vue将数组中的值拼接成字符串
            map()  vue映射，有一个数组得到另一个新数组，返回新数组
            reduce(回调函数 ， 初始值)  vue汇总(统计最终结果)
            some()  vue检测数据中是否存在满足条件的元素
        mutations:{修改数据的}
            1. 是vuex中的方法，修改vuex的数据 2.同步修改本地
        props:[ 定义自己需要从父组件接收的数据变量 ]   
            在子组件中的才有，定义的变量是只读的
        watch:{ 侦听器 }
            监听器watch的写法
                1.如果监听的是this下的第一层数据
                    watch:{showChannel(){}}
                2.如果监听的是this下的第一层数据，但是是复杂数据类型 deep:true深度监听
                    watch:{myChannels:{handler(){},deep:true}}
                3.如果你想监听到对象下某一个属性值的变化  obj:{name:"xxx",age:180}
                    watch:{'obj.name':function(){}}
                4.当你数据发生变化的时候会执行对应函数，初始化默认执行一次
                    watch:{showChannel:{handler(){},immediate:true}}
        vue的生命周期【钩子函数】
            初始化事件配置前beforeCreate    初始化事件完成后 created
            挂载开始前调用 beforeMount      挂载开始完成后 mounted
            第一次加载会触发上面四个钩子函数
            数据更新前调用 beforeUpdate     数据更新完成后 updated
            实例销毁前调用 beforDestroy     实例销毁完成后 destroyed
    style
        下是css当前组件的样式
        scoped写上就只对当前页面生效，避免全局污染
T.
    template 
        下是html只能有一个根标签，推荐div
        <component :is="组件名"/>
            vue的内置组件component，可以动态显示组件is属性指定要显示的组件名
        <Pannel>输入插入的标签内容替换slot</Pannel>
            在父组件中插入自定义标签代替slot
        <keep-alive>
                <component :is="组件名"/>
            </keep-alive>
            vue的内置组件，可以做组件缓存，双标签
            包括频繁切换的组件。
            只能在keep-alive下使用
                activated(){  - 激活时触发  }
                deactivated(){ - 失去激活(停用)状态触发  }
        <slot name="插槽名字">这可以写默认内容，不传值显示</slot>  
            组件插槽，在子组件内用来占位的
            插件只有一个插槽可不写name
            使用时在<Pannel>这传入标签替换slot</Pannel>
        <template v-slot: / #插槽名字>
            输入插入的标签内容
            </template>
            是配合有名字的插槽使用的
            v-slot: 可简写为 # 
            如果slot没有name属性，就用default代替插槽名字
                写为 #default="变量名
    this.$route.query.id 
        获取当前网址上的id【前提是网址上有id    】
U.
V. 
    v-bind:属性名 = "vue数据变量"  
        标签属性的动态绑定 可简写为 : 
        三种运用模式
            直接绑定 :class = "Vue数据变量"   
            三元绑定 :class = "Vue数据变量布尔值 ? '类名' : ''"   
            对象绑定 :class = "类名 : Vue数据变量布尔值"   
    v-for="(值变量 , 索引变量) in 目标结构" :key="值变量.索引变量/id"
        渲染所在标签结构，根据数据/对象,生成循环。
        临时变量不能写到v-for范围外，每个元素绑定一个不重复的key(字符串或数值)
        :key 有id用id 无id用下标索引  作用提高性能
        .pop()        从末尾删除
        .push()       添加到末尾
        .reverse()    翻转数组
        .shift()      从开始删除
        .sort()       排序
        .splice(下标,删除个数,添加值...)     可以添加或删除 
        .unshift()    从头开始添加
    v-html="变量"  会覆盖之前输入的内容
        把值当标签进行解析在显示
    v-if="变量"   还可以配合  v-else-if  和  v-else   使用(多分支判断)
        为false时，直接从DOM树上移除(就是删了)  为true时在从新加载
    v-model="vue数据变量"   
        是将value属性和vue数据变量双向绑定  
        .lazy  在change(改变)时触发而不是input(在input输入)时触发
        .number 尝试以parseFloat转成字符串
        .toUpperCase()  转换为大写
        .trim  去除首位空白字符
        .every   选出属性中共同的属性，返回布尔值
    v-on:事件名 = "代码/函数名(实参)"   给标签绑定事件  简写为 @    
        http://cn.vuejs.org/vz/guide/events.html 更多修饰符
        .enter  检测回车按键
            keydown.enter
        .esc    检测返回按键
        .prevent 阻止默认行为   是e.preventDefault()的简写
        .stop 阻止事件冒泡
    v-once: 事件名
        只渲染一次，后面元素中的数据在更新变化，都不会重新渲染
    v-show="变量"
        为false时，用display:none隐藏(频繁切换使用)  为true时显示
    v-solt 
        占位 可简写为 # 
        如果slot没有name属性，就用default代替插槽名字
        写为 #default="变量名"
    v-text="变量"  会覆盖之前输入的内容
        把值以字符串显示 类似插值表达式{{ 表达式 }}
            插值表达式又叫声明式渲染或胡子语法
    vue 再按TAB键补齐结构框架
        script  行为  里面书写js相关
        style   样式  里面书写css相关
        template    结构  里面书写html相关
    vue-admin-template 
        这是一个极简的 vue admin 管理后台。
        它只包含了 Element UI & axios & iconfont & permission control & lint，
        这些搭建后台必要的东西
    vue create element-study
        创建element项目  |  创建vue脚手架
        vue-element-admin 是 基于vue2创建的element后台管理系统
    vue create vuecli-demo
        项目名: 创建vue项目工程 | 创建vue脚手架
        cn.vuejs.org  网址
    Vue.copmonent("组件名",组件对象)
        全局调用方式
        copmonents:{"组件名",组件对象}
        局部调用方式
    Vue.directives:{ '指令名字':{ inserted(el){ 可以对el进行扩展额外功能 }}}
        全局自定义指令传值 调用时在标签中 v-自定义指令名字 即可调用该方法
    vue-element-admin
        完整全面的vue后台管理系统
    vue -V: 检测vue脚手架是否安装成功
    Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新
W.
    window.confirm('是否****吗？')
        页面提示框，点 确认 为true，点 取消 为false
X.
Y.
Z.
$. 
    $emit 
        触发传值，用来向父组件传值
    $event.target.checked
        判断当前元素(复选框，单选框...)的状态
    $on
        绑定事件
    $router.back()
        返回上一级访问路由， .forward下一级(前一级)路由
    $store
        $store.state.name(数据名) 
        vuex定义的接收公共数据的词，直接使用可以调用
        也可以用computed封装成一个函数，减少代码量
            函数名(){return this.$store.state.name(数据名)}
            封装可以简写  ...mapState(['name(数据名)'])
                mapState辅助函数使用
@.    
    @blur 
        失去焦点
    @click
        鼠标点击
        @click.native="$router.back()"
            点击返回上一级路由，作用就是回退一级
    @keydown.enter
        键盘回车键
    @keydown.esc
        键盘取消Esc键
&. 
    &nbsp;
        英文空格